<template>
  <div class="big-box">
    <stat></stat>
    <!-- 头部 -->
    <div class="header" @click="goFn()">
      <div class="h-left">
        <div class="change-list">
          <div class="menuTab-name" @click="gotoScreen(1)">基本信息</div>
          <div class="menuTab-name" @click="gotoScreen(2)">隐患情况</div>
          <div class="menuTab-name" @click="gotoScreen(3)">攻坚整治</div>
          <div class="menuTab-name" @click="gotoScreen(4)">执法情况</div>
        </div>
      </div>
      <div class="h-center">
        <div class="title">村民经营性自建房消防安全排查治理</div>
      </div>
      <div class="h-right">
        <div class="time">
          <img src="../../assets/bigScreen/time.png" alt="" />
          <div class="date">{{ dates }}</div>
        </div>
      </div>
    </div>
    <!-- 主题内容 -->
    <div class="content">
      <div class="box-con">
        <!-- 左边 -->
        <div class="main-l">
          <div class="m-l-top">
            <div class="title-item">基本信息</div>
            <div class="content1">222</div>
          </div>
          <div class="m-l-center">左中</div>
          <div class="m-l-bottom">左下</div>
        </div>
        <!-- 中间 -->
        <div class="main-c">
          <div class="m-c-top">左上</div>
          <div class="m-c-center">左中</div>
          <div class="m-c-bottom">左下</div>
        </div>
        <!-- 右边 -->
        <div class="main-r">
          <div class="m-r-top">左上</div>
          <div class="m-r-center">左中</div>
          <div class="m-r-bottom">左下</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import stat from './component/childComponent/stat.vue'
import { CountTo } from 'vue3-count-to'
import pieCharts from './component/childComponent/pieCharts.vue'
import hxaingbian from './component/childComponent/hxaingbian.vue'
import srLineAreaOne from './component/childComponent/srLineAreaOne.vue'
import srLineAreaTwo from './component/childComponent/srLineAreaTwo.vue'
import piBarTwoRegister from './component/childComponent/piBarTwoRegister.vue'
import triangleBar from './component/childComponent/triangleBar.vue'
import {
  areaTypeMapList,
  policyPieDataList,
  linesDataOneList,
  linexDataOneList,
  linesDataTwoList,
  linexDataTwoList,
  registerLinesDataList,
  registerLines1DataList,
  registerLinexDataList,
  dynamicXDataList,
  ddynamicSDataList,
} from '../bigScreen/areaTypeMap.js'
// import nmgMap from './map/nmgMap.vue'

const router = useRouter()

const dates = ref('') // 日期

const params = ref({
  city: undefined,
})

const chartKey = ref(1) // key

onMounted(() => {
  start()
  // _getPersonList()
  // _getDemandList()
  // getCityList()
  // _getAchievementList()
  // _getOrgList()
  // _getRegisterList()
  // _getDynamicList()
  // _getPolicyList()
  // _getCompanyList()
})
const getMapList = (id) => {
  params.value.city = id
  _getPersonList()
  _getDemandList()
  _getAchievementList()
  _getOrgList()
  _getRegisterList()
  _getDynamicList()
  _getPolicyList()
  _getCompanyList()
  chartKey.value++
}

const resetMap = () => {
  chartKey.value++
  mapKey.value++
  params.value.city = undefined
  _getPersonList()
  _getDemandList()
  _getAchievementList()
  _getOrgList()
  _getRegisterList()
  _getDynamicList()
  _getPolicyList()
  _getCompanyList()
}

// 1.1人才库
const personTotal = ref(0) // 人数
const pieData = ref([]) // 人才 饼图
const _getPersonList = () => {
  personTotal.value = [1, 2, 3] // 人才总数
  pieData.value = [
    {
      name: '高端人才',
      value: 111,
    },
    {
      name: '院士专家工作站',
      value: 55,
    },
    {
      name: '草原英才”领军人才',
      value: 49,
    },
    {
      name: '绿色通道”引进人才',
      value: 1598,
    },
  ] // 饼图数据
  // getPersonList(params.value).then(res => {
  //     if(res.code == 200) {
  //         // personTotal.value = res.data.total
  //         personTotal.value = res.data.total ? res.data.total.toString().split('') : []
  //         console.log('@personTotal.value', personTotal.value)
  //         res.data.data.map(item => {
  //             pieData.value.push({
  //                 name: item.type,
  //                 value: item.count
  //             })
  //         })
  //     }
  // })
  // console.log('@pieData.value', pieData.value)
}

// 1.2需求库
const demandTotal = ref(0)
const xdata = ref([])
const sdata = ref([])
const _getDemandList = () => {
  demandTotal.value = [8, 3, 4]
  xdata.value = [
    '科技研发需求',
    '科研人才需求',
    '概念验证需求',
    '中试熟化需求',
    '成果需求',
    '融资需求',
  ]
  sdata.value = [123, 456, 23, 556, 689, 343]
  // getDemandList(params.value).then(res => {
  //     if(res.code == 200) {
  //         demandTotal.value = res.data.total.toString()
  //         console.log('@', demandTotal.value)
  //         res.data.data.map(item => {
  //             xdata.value.push(item.type)
  //             sdata.value.push(item.count)
  //         })
  //     }
  // })
}

// 2.地图
const mapKey = ref(1)
const areaTypeMap = ref([])

// // getCityList().then(res => {
// //     if(res.code == 200) {
// //         areaTypeMap.value = res.data
// //         console.log('@areaTypeMap.value',areaTypeMap.value);
// //     }
// // })
const getCityList = () => {
  areaTypeMap.value = areaTypeMapList
}

// 3.企业库

const companyTotal = ref(0)
const technologyEnterpriseCount = ref(0)
const littleEnterpriseCount = ref(0)
const yearLeaderEnterpriseCount = ref(0)
const _getCompanyList = () => {
  companyTotal.value = [8, 3, 4]
  technologyEnterpriseCount.value = 1887
  littleEnterpriseCount.value = 123
  yearLeaderEnterpriseCount.value = 434
  // getCompanyList(params.value).then(res => {
  //     if(res.code == 200) {
  //         companyTotal.value = res.data.total.toString()
  //         technologyEnterpriseCount.value = res.data.technologyEnterpriseCount
  //         littleEnterpriseCount.value = res.data.littleEnterpriseCount
  //         yearLeaderEnterpriseCount.value = res.data.yearLeaderEnterpriseCount
  //     }
  // })
}

// 4.政策库
const policyTotal = ref(0)
const policyPieData = ref([])
const _getPolicyList = () => {
  policyTotal.value = [8, 3, 4]
  policyPieData.value = policyPieDataList
  console.log('@', policyPieData.value)
  // getPolicyList(params.value).then(res => {
  //     if(res.code == 200) {
  //         policyTotal.value = res.data.total.toString()
  //         res.data.data.map(item => {
  //             policyPieData.value.push({
  //                 name: item.type,
  //                 value: item.count
  //             })
  //         })
  //     }
  // })
}

// 5.成果库
const achievementTotal = ref(0)
const linesDataOne = ref([])
const linexDataOne = ref([])
const _getAchievementList = () => {
  achievementTotal.value = [8, 3, 4]
  linesDataOne.value = linesDataOneList
  linexDataOne.value = linexDataOneList
  // getAchievementList(params.value).then(res => {
  //     achievementTotal.value = res.data.total.toString()
  //     res.data.data.map(item => {
  //         linexDataOne.value.push(item.type)
  //         linesDataOne.value.push(item.count)
  //     })
  // })
}

// 6.机构库
const orgTotal = ref(0)
const linesDataTwo = ref([])
const linexDataTwo = ref([])
const _getOrgList = () => {
  orgTotal.value = [8, 3, 4]
  linesDataTwo.value = linesDataTwoList
  linexDataTwo.value = linexDataTwoList
  // getOrgList(params.value).then(res => {
  //     orgTotal.value = res.data.total.toString()
  //     res.data.data.map(item => {
  //         linexDataTwo.value.push(item.type)
  //         linesDataTwo.value.push(item.count)
  //     })
  // })
}

// 7.注册人数
const registerTotal = ref(0)
const registerLinesData = ref([])
const registerLines1Data = ref([])
const registerLinexData = ref([])
const _getRegisterList = () => {
  registerTotal.value = [8, 3, 4]
  registerLinesData.value = registerLinesDataList
  registerLines1Data.value = registerLines1DataList
  registerLinexData.value = registerLinexDataList
  // getRegisterList(params.value).then(res => {
  //     registerTotal.value = res.data.total.toString()
  //     res.data.data.map(item => {
  //         registerLinesData.value.push(item.registerCount)
  //         registerLines1Data.value.push(item.accreditationCount)
  //         registerLinexData.value.push(item.type)
  //     })
  // })
}

// 8.平台动态
const dynamicTotal = ref(0)
const dynamicXData = ref([])
const dynamicSData = ref([])
const _getDynamicList = () => {
  dynamicTotal.value = [8, 3, 4]
  dynamicXData.value = dynamicXDataList
  dynamicSData.value = ddynamicSDataList
  // getDynamicList(params.value).then(res => {
  //     dynamicTotal.value = res.data.total.toString()
  //     res.data.data.map(item => {
  //         dynamicXData.value.push(item.type)
  //         dynamicSData.value.push(item.count)
  //     })
  // })
}

//判断时间是否为个位数，如果时间为个位数就在时间之前补上一个“0”
const check = (val) => {
  if (val < 10) {
    return '0' + val
  } else {
    return val
  }
}
const displayTime = () => {
  //获取系统当前的年、月、日、小时、分钟、毫秒
  let date = new Date()
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  let hour = date.getHours()
  let minutes = date.getMinutes()
  let seconds = date.getSeconds()
  dates.value = `${year}年${month}月${day}日 ${check(hour)}:${check(
    minutes
  )}:${check(seconds)}`
}

//每隔1秒调用一次displayTime函数
const start = () => {
  setInterval(() => {
    displayTime()
  }, 1000) //单位是毫秒
}

// 去科技人才
const goPersonTotalPage = () => {
  router.push({
    path: '/bigScreenNewIndex',
  })
}
// 返回
const goBack = () => {
  router.push({
    path: '/chart',
  })
}
// 切换
const gotoScreen = (act) => {
  console.log('@gxn', act)
  router.push({
    path: '/bigScreen',
    query: {
      act: act,
    },
  })
}
const goFn = () => {
  console.log('@qwewqe')
}
// 去分拣中心
const goHerf = () => {
  // window.location.href = 'https://www.techreform.net/'
}
</script>

<style scoped="scoped" lang="scss">
@font-face {
  font-family: 'ffa';
  src: url(../../assets/bigScreen/fonts/DS-DIGIB.TTF);
}
ul,
li {
  list-style: none;
}
.totalBox {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 95%;
  height: 5rem;
  border: 1px solid #02325a;
  background: rgba(2, 21, 54, 0.6);
  border-radius: 5px;

  .totalBox-left {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 40%;
    height: 100%;
    border-right: 1px solid #02325a;
    padding-left: 2rem;

    .totalBox-left-icon {
      width: 2rem;
      height: 2rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .totalBox-left-text {
      font-size: 1.8rem;
      color: #00eefd;
      margin-left: 1rem;
      margin-top: 0.5rem;
    }
  }

  .totlBox-right {
    display: flex;
    justify-content: right;
    width: 60%;
    padding: 0.5rem;

    .numberBox {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 4rem;
      .number {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3rem;
        height: 100%;
        font-size: 3.2rem;
        border-radius: 0.5rem;
        text-align: center;
        font-family: 'ffa';
        background: #052557;
        margin-left: 0.5rem;
      }
    }
  }
}

.big-box {
  // background-color: #e7250c;
  background-color: #071c3b;
  height: 100vh;
  overflow: hidden;
  .header {
    // text-align: center;
    // position: relative;
    height: 11.5rem;
    // border: 1px solid red;
    background-image: url('@/assets/bigScreen1/header.png');
    background-repeat: no-repeat;
    background-size: 100% 40%;
    display: flex;
    justify-content: space-between;
    .h-left {
      width: 30%;
      height: 100%;
      // border: 1px solid sandybrown;
      display: flex;
      align-items: center;

      .change-list {
        width: 100%;
        height: 2rem;
        // height: 40px;
        padding: 0 2rem;
        // border: 1px solid red;
        display: flex;
        justify-content: space-between;
        font-size: 1.7rem;
        .menuTab-name {
          width: 9rem;
          height: 4rem;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url('@/assets/bigScreen/menu-tab.png') no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
    }
    .h-center {
      width: 30%;
      height: 100%;
      // border: 1px solid sandybrown;
      .title {
        color: #23b9eb;
        text-align: center;
        font-size: 3rem;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-weight: bold;
      }
    }
    .h-right {
      width: 30%;
      height: 100%;
      // border: 1px solid sandybrown;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .time {
        width: 50%;
        // border: 1px solid red;
        margin-top: 1rem;
        line-height: 4rem;
        font-size: 1.7rem;
        height: 4rem;
        display: flex;
        .date {
          margin-left: 2rem;
        }
      }
    }
  }
  .content {
    height: calc(100vh - 14.3rem);
    padding: 0 3rem 2.5rem;
    border: 1px solid red;
    .box-con {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      border: 1px solid seagreen;
      .main-l {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .m-l-top {
          height: 32%;
          border: 2px solid #274187;
          // border-radius: 6px;
          .title-item {
            height: 4rem;
            line-height: 2rem;
            font-size: 1.5rem;
            padding-left: 1rem;
            border: 1px solid red;
            background-image: url('@/assets/bigScreen1/title.png');
            background-repeat: no-repeat;
            background-size: 100% 90%;
          }
          .content1 {
            height: calc(100% - 4rem);
            border: 1px solid red;
          }
        }
        .m-l-center {
          height: 32%;
          border: 2px solid #274187;
          // border-radius: 6px;
        }
        .m-l-bottom {
          height: 32%;
          border: 2px solid #274187;
          // border-radius: 6px;
        }
      }
      .main-c {
        width: 49%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .m-c-top {
          height: 20%;
          border: 2px solid #274187;
        }
        .m-c-center {
          height: 56%;
          border: 2px solid #274187;
        }
        .m-c-bottom {
          height: 20%;
          border: 2px solid #274187;
        }
      }

      .main-r {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .m-r-top {
          height: 32%;
          border: 2px solid #274187;
          // border-radius: 6px;
        }
        .m-r-center {
          height: 32%;
          border: 2px solid #274187;
          // border-radius: 6px;
        }
        .m-r-bottom {
          height: 32%;
          border: 2px solid #274187;
          // border-radius: 6px;
        }
      }
    }
  }
}
.h4s {
  height: 4.5rem;
  line-height: 4.5rem;
  background-image: url('@/assets/bigScreen/title-bg4.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem 0.3rem 4.7rem;
  box-sizing: border-box;

  .tit-l {
    font-size: 1.8rem;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);

    span {
      font-size: 1.4rem;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 0.62);
      margin-left: 1.8rem;
    }
  }
  .tit-r {
    display: flex;
    align-items: center;
  }
  .more {
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);
    cursor: pointer;
  }
}
.h4s-ts {
  background-image: url('@/assets/bigScreen/title-bg31.png');
}
.h4s-ts2 {
  background-image: url('@/assets/bigScreen/title-bg32.png');
}
.title-item {
  height: 4rem;
  line-height: 2rem;
  font-size: 1.5rem;
  padding-left: 1rem;
  border: 1px solid red;
  background-image: url('@/assets/bigScreen1/title.png');
  background-repeat: no-repeat;
  background-size: 100% 90%;
}
</style>
